<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            button.css3button{
                font-family: monospace;
                font-size: 14px;
                color: white;
                padding: 10px 20px;
                background-color: black;
                background: -webkit-gradient(linear, top, #a3a3a3 0%, #3b3b3b 50%, #24424 50%, #000000);
                -webkit-border-radius: 10px;
                border: 3px white solid;
                -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.6);
                text-shadow: 0px -1px 0px rgba(000,000,000,1), 0px 1px 0px rgba(255,255,255,0.2);
            }
            
            button.css3button{
                -webkit-transition: all 200ms ease-in-out;
            }
            
            button.css3button:hover{
                transform: rotate(10deg) scale(1.3);
            }
            
            @keyframes buttonHoverAnimation{
                0%{
                    -webkit-transform: rotate(0deg) scale(1);
                }
                70%{
                    -webkit-transform: rotate(10deg) scale(1.3);
                }
                100%{
                    -webkit-transform: rotate(0deg) scale(1);
                }
            }
            
            button.css3button:hover{
                -webkit-animation: buttonHoverAnimation 400ms infinite;
            }
        </style>
    </head>
    <body>
        <div>
            <button class="css3button">test css 3</button>
        </div>
    </body>
</html>
